@page "/circular-gauge/data-sample"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.Grids

@inherits SampleBaseComponent;

<SampleDescription>
     <p>This sample demonstrates the live data sample in a circular gauge.</p>
</SampleDescription>
<ActionDescription>
   <p>Pointer values in the gauge can be updated dynamically by using <code><a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/circular-gauge/methods/?no-cache=1#setpointervalue'>SetPointerValue</a></code> method. In this example, a stock price changes over the countries, are showed by using a circular gauge.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" @ref="@GermanRef">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="230" EndAngle="130">
                                <CircularGaugeAxisLineStyle Width="0" Color="transparent"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="0" Height="0.01"/>
                                <CircularGaugeAxisMinorTicks Width="0" Height="0.01"/>
                                <CircularGaugeRanges>
                                    <CircularGaugeRange Start="0" End="50" StartWidth="15" EndWidth="15" Color="#EC121C"/>
                                    <CircularGaugeRange Start="50" End="100" StartWidth="15" EndWidth="15" Color="#45EA0C"/>
                                </CircularGaugeRanges>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="@GermanPointerValue" Radius="60%" Color="#777777" PointerWidth="5">
                                        <CircularGaugePointerAnimation Enable="false" Duration="900"/>
                                        <CircularGaugeCap Radius="6" Color="#777777">
                                            <CircularGaugeCapBorder Width="0"/>
                                        </CircularGaugeCap>
                                        <CircularGaugeNeedleTail Length="25%" Color="#777777"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="30%">
                                        <ContentTemplate>
                                            <div id="templateWrap">
                                                <img src="images/circular-gauge/positive.png" />
                                                <div class='des'>
                                                    <div class="annotationTextValue">@GermanAnnotationText</div>
                                                </div>
                                            </div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="65%" Content="Germany">
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-30px;">Germany</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" @ref="@USARef">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="230" EndAngle="130">
                                <CircularGaugeAxisLineStyle Width="0" Color="transparent">
                                </CircularGaugeAxisLineStyle>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="0" Height="0.01">
                                </CircularGaugeAxisMajorTicks>
                                <CircularGaugeAxisMinorTicks Width="0" Height="0.01">
                                </CircularGaugeAxisMinorTicks>
                                <CircularGaugeRanges>
                                    <CircularGaugeRange Start="0" End="50" StartWidth="15" EndWidth="15" Color="#EC121C"/>
                                    <CircularGaugeRange Start="50" End="100" StartWidth="15" EndWidth="15" Color="#45EA0C"/>
                                </CircularGaugeRanges>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="@UsaPointerValue" Radius="60%" Color="#777777" PointerWidth="5">
                                        <CircularGaugePointerAnimation Enable="false" Duration="900"/>
                                        <CircularGaugeCap Radius="6" Color="#777777">
                                            <CircularGaugeCapBorder Width="0"/>
                                        </CircularGaugeCap>
                                        <CircularGaugeNeedleTail Length="25%" Color="#777777"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="30%">
                                        <ContentTemplate>
                                            <div id="templateWrap">
                                                <img src="images/circular-gauge/positive.png" />
                                                <div class='des'>
                                                    <div class="annotationTextValue">@USAAnnotationText</div>
                                                </div>
                                            </div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="65%" Content="USA">
                                        <ContentTemplate>
                                            <div class="annotationText" style="margin-left:-10px;">USA</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" @ref="@UKRef">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="230" EndAngle="130">
                                <CircularGaugeAxisLineStyle Width="0" Color="transparent">
                                </CircularGaugeAxisLineStyle>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="0" Height="0.01"/>
                                <CircularGaugeAxisMinorTicks Width="0" Height="0.01"/>
                                <CircularGaugeRanges>
                                    <CircularGaugeRange Start="0" End="50" StartWidth="15" EndWidth="15" Color="#EC121C"/>
                                    <CircularGaugeRange Start="50" End="100" StartWidth="15" EndWidth="15" Color="#45EA0C"/>
                                </CircularGaugeRanges>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="@UkPointerValue" Radius="60%" Color="#777777" PointerWidth="5">
                                        <CircularGaugePointerAnimation Enable="false" Duration="900"/>
                                        <CircularGaugeCap Radius="6" Color="#777777">
                                            <CircularGaugeCapBorder Width="0"/>
                                        </CircularGaugeCap>
                                        <CircularGaugeNeedleTail Length="25%" Color="#777777"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="30%">
                                        <ContentTemplate>
                                            <div id="templateWrap">
                                                <img src="images/circular-gauge/negative.png" />
                                                <div class='des'>
                                                    <div class="annotationTextValue">@UKAnnotationText</div>
                                                </div>
                                            </div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="65%" Content="UK">
                                        <ContentTemplate>
                                            <div class="annotationText">UK</div>
                                        </ContentTemplate>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-12">
                        <SfGrid DataSource="@GridData" AllowSelection="false" @ref="@Grid"
                                 EnableHover="true">
                            <GridColumns>
                                <GridColumn Field="Country" HeaderText="Country" TextAlign="TextAlign.Left"></GridColumn>
                                <GridColumn Field="Sales" HeaderText="Sales $" TextAlign="TextAlign.Left"></GridColumn>
                                <GridColumn Field="Target" HeaderText="Target $" TextAlign="TextAlign.Left"></GridColumn>
                                <GridColumn Field="vsTarget" HeaderText="vs Target" TextAlign="TextAlign.Left"></GridColumn>
                            </GridColumns>
                        </SfGrid>
                    </div>
                </div>
            </div>
        </div>
        <style>
            #templateWrap img {
                width: 16px;
                height: 16px;
                margin-top: 4px;
                margin-left: -25px
            }

            #templateWrap .des {
                float: right;
            }
            .annotationText {
                color:#9E9E9E;
                font-size:16px;
                font-style:Roboto;
            }
            .annotationTextValue {
                color:#424242;
                font-size:20px;
                font-family:Roboto
            }
        </style>

    </div>
</div>
@code{
    SfGrid<GaugeGridData> Grid { get; set; }
    SfCircularGauge GermanRef;
    SfCircularGauge USARef;
    SfCircularGauge UKRef;
    private double GermanPointerValue = 75;
    private double UsaPointerValue = 60;
    private double UkPointerValue = 25;
    public string GermanAnnotationText = "75%";
    public string USAAnnotationText = "60%";
    public string UKAnnotationText = "25%";
    public string GermanGridTarget;
    public string UsaGridTarget;
    public string UkGridTarget;
    Random Random = new Random();
    public double Value1;
    public double Value2;
    public double Value3;
    public string Grid1;
    public string Grid2;
    public string Grid3;
    public class GaugeGridData {
        public string Country { get; set; }
        public double Sales { get; set; }
        public double Target { get; set; }
        public string vsTarget { get; set; }
    }
    private List<GaugeGridData> GridData { get; set; } = new List<GaugeGridData>();
    System.Timers.Timer syncTimer1 = null;
    protected override void OnInitialized() {
        syncTimer1 = new System.Timers.Timer(2000);
        syncTimer1.Elapsed += this.PointerValueUpdate;
        syncTimer1.AutoReset = true;
        syncTimer1.Enabled = true;
        List<GaugeGridData> GaugeData = new List<GaugeGridData> {
            new GaugeGridData { Country = "Germany" , Sales = 500 , Target = 400 ,vsTarget = "300"},
            new GaugeGridData { Country = "USA" , Sales = 1000 , Target = 600 ,vsTarget = "360"},
            new GaugeGridData { Country = "UK" , Sales = 600 , Target = 700 ,vsTarget = "-100"},
        };
        this.GridData = GaugeData;
    }
    void PointerValueUpdate(Object source, System.Timers.ElapsedEventArgs e) {
        var Number = Random.NextDouble();
        GermanPointerValue = ((Number * 35) + 55);
        UsaPointerValue = ((Number * 15) + 60);
        UkPointerValue = ((Number * 30) + 10);
        Value1 = Math.Round((Number * (90 - 55) + 55));
        Value2 = Math.Round((Number * (75 - 60) + 60));
        Value3 = Math.Round((Number * (40 - 10) + 10));
        Grid1 = (4 * Value1).ToString();
        Grid2 = (6 * Value2).ToString();
        Grid3 = (-(7 * Value3)).ToString();
        GermanGridTarget = (4 * GermanPointerValue).ToString("N0");
        UsaGridTarget = (6 * UsaPointerValue).ToString("N0");
        UkGridTarget = (-(7 * UkPointerValue)).ToString("N0");
        GermanAnnotationText = GermanPointerValue.ToString("N0") + "%";
        USAAnnotationText = UsaPointerValue.ToString("N0") + "%";
        UKAnnotationText = "-" + UkPointerValue.ToString("N0") + "%";
        @*Hidden:Lines*@
        #pragma warning disable BL0005
        @*End:Hidden*@
        this.Grid.DataSource = new List<GaugeGridData>
        {
            new GaugeGridData { Country = "Germany" , Sales = 500 , Target = 400 ,vsTarget = Grid1},
            new GaugeGridData { Country = "USA" , Sales = 1000 , Target = 600 ,vsTarget = Grid2},
            new GaugeGridData { Country = "UK" , Sales = 600 , Target = 700 ,vsTarget =  Grid3},
        };
        @*Hidden:Lines*@
        #pragma warning restore BL0005
        @*End:Hidden*@
        GermanRef.SetPointerValueAsync(0, 0, GermanPointerValue);
        USARef.SetPointerValueAsync(0, 0, UsaPointerValue);
        UKRef.SetPointerValueAsync(0, 0, UkPointerValue);
    }
}